<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<form name="quaryBy" method="post">
    <table width="330" height="94" border="0" align="center">
        <tr>
            <td align="center">关键字：<input type="text" id="keyword" name="keyword"></td>
        </tr>
        <tr>
            <td align="center">
                <input id="bname" name="rd" type="radio" value="queryByName" checked
                       onclick="change(this.value)">按书名查询
                <input id="author" name="rd" type="radio" value="queryByAuthor"
                       onclick="change(this.value)">按作者查询
                <input id="publ" name="rd" type="radio" value="queryByPublisher"
                       onclick="change(this.value)">按出版社查询
            </td>
        </tr>
        <tr>
            <td align="center"><input type="button" value="查询"
                                      onclick="submitForm()"></td>
        </tr>
        <tbody id="tb">

        </tbody>
    </table>
</form>
</body>
<script>
    var v = "quaryByName";
    function change(val) {
        v = val;
    }

    function submitForm() {
        $.ajax({
            url: v,
            data: {"keyword": $("#keyword").val()},
            type: "POST",
            dataType: "json",
            success: function (data) {
                var str = "";
                $("#tb").html("");
                $(data).each(function (i, n) {
                    str += "<tr>" +
                        "<td>"+n.bname+"</td>" +
                        "<td>"+n.author+"</td>" +
                        "<td>"+n.publ+"</td>" +
                        "</tr>"
                });
                $("#tb").html(str);
            }

        });
    }

    $(function () {
        submitForm();
        $("#bname").click(function () {
            v="quaryByName";
        });
        $("#author").click(function () {
            v="quaryByAuthor";
        });
        $("#publ").click(function () {
            v= "quaryByPubl";
        });

    })

</script>
</html>